<template>
  <div class="up-cover" @click="dialogVisible = true">
    <div class="img">
        <!-- !imageSrc -->
      <div class="add_icon" v-if="!value "></div>
      <img :src="value" alt=""   ref="up_image"/>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="素材库" name="first">
            <image-list
            ref="imageList"
            ></image-list>
        </el-tab-pane>
        <el-tab-pane label="上传图片" name="second">
          <div class="upload_image" @click="$refs.file.click()">
            <div class="upload">
              <img :src="imageUrl" alt="" v-if="imageUrl" />
            </div>
            <span class="add_icon" v-if="!imageUrl">
              <i class="el-icon-plus"></i>
            </span>
            <input type="file" ref="file" hidden @change="onChangeUploading" />
          </div>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onConfrim" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImageList from "@/components/imagelist/ImageList.vue"
import { uploadImage } from "@/request/api.js";


export default {
  data() {
    return {
      dialogVisible: false,
      activeName: "second",

      imageUrl: "",
      imageSrc: "",
      loading: false,
    };
  },
  components:{
      ImageList
    
  },
  watch:{

  },
  props:['value'],
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose() {
      this.dialogVisible = false;
    },

    onChangeUploading() {
      const file = this.$refs["file"];
      console.log("文件", file);

      const blobData = window.URL.createObjectURL(file.files[0]);

      this.imageUrl = blobData;

      //   this.$refs.file.value = "";
    },

    onConfrim() {
      if (this.activeName === "second") {
        this.loading = true;
        const file = this.$refs.file.files[0];
        
        console.log(this.imageUrl);
        if (!this.imageUrl) {
          this.loading = false;
          this.$message("请选择图片");
          return;
        }
        const fd = new FormData();
        fd.append("image", file);
        uploadImage(fd)
          .then((res) => {
            console.log("上传成功", res.data.data.url);
            // this.$refs.up_image.src = res.data.data.url

            this.$message({
              showClose: true,
              message: "上传成功！",
              type: "success",
            });
            this.dialogVisible = false;
            this.loading = false;
            this.$emit('input',res.data.data.url)
          })
          .catch((err) => {
              console.log("上传失败！",err)
            this.$message("上传失败！");
            this.loading = false;
          });
      }else if(this.activeName === "first"){
          let imageList = this.$refs["imageList"]
          console.log(imageList.selected)

          let selected = imageList.selected
          if(selected < 0){
                this.$message({
                    message:"请选择素材"
                })
                return
          }
          this.dialogVisible = false
          
          this.$emit('input',imageList.images[selected].url)
      }
    },
  },
};
</script>

<style lang="less" scoped>
.up-cover {
  width: 150px;
  height: 160px;
  border: 1px solid #eee;
  overflow: hidden;
  .img {
    width: 100%;
    height: 100%;
    .add_icon {
      width: 100%;
      height: 100%;
      background: url(../../../assets/image/icon/pic_bg.png) no-repeat;
      // background-position: center center;
      background-size: 100% auto;
      background-position: center center;
    }
    > img {
        display: block;
      width: 100%;
      height: 100%;
    }
  }
}
.box {
  width: 400px;
}
.upload_image {
  display: flex;
  justify-content: center;
  position: relative;
  .upload {
    width: 230px;
    height: 250px;
    border: 1px dashed black;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .add_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
  }
  &:hover .upload {
    border-color: #409eff;
  }
  &:hover .add_icon {
    color: #409eff;
  }
}
</style>

